<link rel="stylesheet" href="templates/authority/messageStatistics/css/messageStatistics.css" />
<!-- <script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.3/lib/index.js"></script> -->
 <input type="text" value="" id="orgCode" style="display:none;"/>
<div class="pd14 vany_authority">
    <div class="vany_treeTable pd14" id="authority">
        <!--面包屑-->
        <div class="pb10" id="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">消息管理</el-breadcrumb-item>
                <el-breadcrumb-item>消息统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--表格-->
        <div id="contents">
            <div id="app" class = "app">
                <el-row :gutter="20">
                    <el-col :span="6"><div class="grid-content bg-purple content"><ul><li>消息总量</li><li id = "xxzl" style="font-size: 32px;">8650</li></ul></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple content"><ul><li>本月消息</li><li id = "byxx" style="font-size: 32px;">8650</li></ul></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple content"><ul><li>本周消息</li><li id = "bzxx" style="font-size: 32px;">8650</li></ul></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple content"><ul><li>今日消息</li><li id = "jrxx" style="font-size: 32px;">8650</li></ul></div></el-col>
                </el-row>
            </div>           
            <div class="contentR">
                <div id="chartTab">
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="日统计" name="chartFirst">
                            <template>
                                <el-select v-model="value" placeholder="信息办" @change="changeValue">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                            <!-- <el-button type="primary">查询</el-button> -->

                            <div id="chartFirst" class="chartTab"></div>
                        </el-tab-pane>
                        <el-tab-pane label="月统计" name="chartSecond">
                        	<template>
                                <el-select v-model="value" placeholder="信息办" @change="changeValue2">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                            <!-- <el-button type="primary">查询</el-button> -->
                            <div id="chartSecond" class="chartTab"></div>
                        </el-tab-pane>
                        <el-tab-pane label="年统计" name="chartThird">
                        	<template>
                                <el-select v-model="value" placeholder="信息办" @change="changeValue3">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                            <!-- <el-button type="primary">查询</el-button> -->
                            <div id="chartThird" class="chartTab"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>    
        </div>
    </div>
	<table style="width:100%;margin-top:10px;table-layout:fixed;min-width:800px;">
		<tr>
			<td style="width:50%;min-height:10px;">
				<div class = "charts">
	              <div id="myChart" class = "myChart"></div>
	              <div class = "title_msg" style="position: absolute;font-size: 16px;font-weight: bold;color: #000;">消息模式统计</div>
	              <div id="calendartool1" class = "calendar">
	                  <template>
	                      <div class="block">
	                          <el-date-picker v-model="value6" type="daterange" @change="pickTime" placeholder="选择时间区间" >
	                          </el-date-picker>
	                      </div>
	                  </template>
	              </div>
	              <!-- <div id = "tableShow1" class = "tableShow"> 
		               <template>
						  <el-table :data="tableData" borderstyle="360px">
						    <el-table-column prop="date" label="模式" width="120px">
						    </el-table-column>
						    <el-table-column prop="name" label="数量" width="120px">
						    </el-table-column>
						    <el-table-column prop="address" label="百分比" width="120px">
						    </el-table-column>
						  </el-table>
						</template>
		          </div> -->
		          <table id = "tableShow1" cellspacing="30" class = "tableShow"> 
		          		<tr style="background-color: #e3e8ee;">
		          			<td style="font-weight: bold;">模式</td>
		          			<td style="font-weight: bold;">数量</td>
		          			<td style="font-weight: bold;">百分比</td>
		          		</tr>
		          		<tr>
		          			<td>图文</td>
		          			<td>0</td>
		          			<td>0%</td>
		          		</tr>
		          		<tr>
		          			<td>文本</td>
		          			<td>0</td>
		          			<td>0%</td>
		          		</tr>
		          		<tr>
		          			<td>外链</td>
		          			<td>0</td>
		          			<td>0%</td>
		          		</tr>
		          </table>
	            </div>	            
			</td>
			<td style="width:50%;min-height:10px;">
				<div class = "charts" style = "float:right;">
	              <div id="myChart1" class = "myChart"></div>
	              <div class = "title_msg" style="position: absolute;font-size: 16px;font-weight: bold;color: #000;">消息渠道统计</div>
	              <div id="calendartool2">
	                  <template>
	                      <div class="block">
	                          <el-date-picker v-model="value6" type="daterange" @change="pickTime1" placeholder="选择时间区间">
	                          </el-date-picker>
	                      </div>
	                  </template>
	              </div>
	              <table id = "tableShow2" style="width:480px;"  class = "tableShow"> 
		          		<tr style="background-color: #e3e8ee;">
		          			<td style="font-weight: bold;">渠道</td>
		          			<td style="font-weight: bold;">数量</td>
		          			<td style="font-weight: bold;">百分比</td>
		          			<td style="font-weight: bold;">成本</td>
		          		</tr>
		          		<tr>
		          			<td>短信</td>
		          			<td>0</td>
		          			<td>0%</td>
		          			<td>0%</td>
		          		</tr>
		          		<tr>
		          			<td>邮件</td>
		          			<td>0</td>
		          			<td>0%</td>
		          			<td>0%</td>
		          		</tr>
		          		<tr>
		          			<td>企业号</td>
		          			<td>0</td>
		          			<td>0%</td>
		          			<td>0%</td>
		          		</tr>
		          </table>
	          </div>
			</td>
		</tr>
	</table>   
</div>
<script type="text/javascript" src="templates/authority/messageStatistics/js/echarts.min.js"></script>
<script type="text/javascript" src="templates/authority/messageStatistics/js/messageStatistics.js"></script>

<script type="text/javascript">
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('myChart'));
    var myChart1 = echarts.init(document.getElementById('myChart1'));
  //消息模式统计
    var subtext=0,tw=0,wz=0,wl=0;
    $.ajax({
        type: "post",
        url: "/msgStatistic/getMsgPatternById",
        data:{token:sessionStorage.token},
        async: true,
        success: function(data) {
        	subtext = data.resultData.xxzl;
        	tw = data.resultData.tw;
        	wz = data.resultData.wz;
        	wl = data.resultData.wl;
        	$($('#tableShow1 tr')[1].cells[1]).html(tw);//图文
        	$($('#tableShow1 tr')[1].cells[2]).html(parseInt(tw*100/subtext)+'%');
        	$($('#tableShow1 tr')[2].cells[1]).html(wz);
        	$($('#tableShow1 tr')[2].cells[2]).html(parseInt(wz*100/subtext)+'%');
        	$($('#tableShow1 tr')[3].cells[1]).html(wl);
        	$($('#tableShow1 tr')[3].cells[2]).html(parseInt(wl*100/subtext)+'%');
        	createOption(data.resultData.xxzl,data.resultData.tw,data.resultData.wz,data.resultData.wl);
        	setOption();
        }
    });
    //消息渠道统计
    $.ajax({
        type: "post",
        url: "/msgStatistic/getMsgChannelById",
        data:{token:sessionStorage.token},
        async: true,
        success: function(data) {
        	subtext = data.resultData.xxzl;
        	sms = data.resultData.sms;
        	mail = data.resultData.mail;
        	wechat = data.resultData.wechat;
        	$($('#tableShow2 tr')[1].cells[1]).html(sms);//图文
        	$($('#tableShow2 tr')[1].cells[2]).html(parseInt(sms*100/subtext)+'%');
        	$($('#tableShow2 tr')[1].cells[3]).html(sms*0.04);
        	$($('#tableShow2 tr')[2].cells[1]).html(mail);
        	$($('#tableShow2 tr')[2].cells[2]).html(parseInt(mail*100/subtext)+'%');
        	$($('#tableShow2 tr')[2].cells[3]).html('0.00');
        	$($('#tableShow2 tr')[3].cells[1]).html(wechat);
        	$($('#tableShow2 tr')[3].cells[2]).html(parseInt(wechat*100/subtext)+'%');
        	$($('#tableShow2 tr')[3].cells[3]).html('0.00');
        	createOption1(subtext,sms,mail,wechat);
        	setOption1();
        }
    });
    function createOption(subtext,tw,wz,wl){
    	option = {
        	    title:{
        	        text:'消息总数',
        	        subtext:subtext,
        	        left:'center',
        	        top:'44%',
        	        itemGap:5,
        	        textStyle:{
        	            color:'#141f1f',
        	            fontSize:12
        	        },
        	        subtextStyle:{
        	            color:'#0072e6',
        	            fontSize:18,
        	            fontWeight:'bold'
        	        }
        	    },
        	    legend: {
                    orient: 'vertical',
                    x: 'left',
                    y:'30px',
                    data:['图文','文本','外链']
                },
        	    color: ['rgb(72,118,255)','rgb(255,182,193)','rgb(255,215,0)'],
        	    series: [
        	        {
        	            name:'消息',
        	            type:'pie',
        	            radius: ['38%', '50%'],
        	            label: {
        	                normal: {
        	                    //formatter: '{b|{b}}\n{c}人',
        	                    rich: {
        	                        b: {
        	                            fontSize: 12,
        	                            lineHeight: 20
        	                        }
        	                    }
        	                }
        	            },
        	            data:[
        	                {value:tw, name:'图文'},
		                    {value:wz, name:'文本'},
		                    {value:wl, name:'外链'}
        	            ]
        	        }
        	    ]
        	};
    		
    }   
    function createOption1(subtext,sms,mail,wechat){
    	option1 = {
        	    title:{
        	        text:'消息总数',
        	        subtext:subtext,
        	        left:'center',
        	        top:'44%',
        	        itemGap:5,
        	        textStyle:{
        	            color:'#141f1f',
        	            fontSize:12
        	        },
        	        subtextStyle:{
        	            color:'#0072e6',
        	            fontSize:18,
        	            fontWeight:'bold'
        	        }
        	    },
        	    legend: {
                    orient: 'vertical',
                    x: 'left',
                    y:'30px',
                    data:['短信','邮件','企业号']
                },
        	    color: ['rgb(72,118,255)','rgb(255,182,193)','rgb(255,215,0)'],
        	    series: [
        	        {
        	            name:'消息',
        	            type:'pie',
        	            radius: ['38%', '50%'],
        	            label: {
        	                normal: {
        	                    //formatter: '{b|{b}}\n{c}人',
        	                    rich: {
        	                        b: {
        	                            fontSize: 12,
        	                            lineHeight: 20
        	                        }
        	                    }
        	                }
        	            },
        	            data:[
        	                {value:sms, name:'短信'},
		                    {value:mail, name:'邮件'},
		                    {value:wechat, name:'企业号'}
        	            ]
        	        }
        	    ]
        	};
    		
    } 

    // 使用刚指定的配置项和数据显示图表。
    function setOption(){
    	myChart.setOption(option);
    }
    function setOption1(){
    	myChart1.setOption(option1);
    }
 	var Main = {
		data() {
 			return {  
 		        value6: ''   		        
 		      };
 		    },
			methods: {
		      pickTime (val) {//2017-09-11 - 2017-10-11
		    	  $.ajax({
		    	        type: "post",
		    	        url: "/msgStatistic/getMsgPatternById",
		    	        data:{token:sessionStorage.token,date:val},
		    	        async: true,
		    	        success: function(data) {
		    	        	subtext = data.resultData.xxzl;
		    	        	tw = data.resultData.tw;
		    	        	wz = data.resultData.wz;
		    	        	wl = data.resultData.wl;
		    	        	$($('#tableShow1 tr')[1].cells[1]).html(tw);//图文
		    	        	$($('#tableShow1 tr')[1].cells[2]).html(parseInt(tw*100/subtext)+'%');
		    	        	$($('#tableShow1 tr')[2].cells[1]).html(wz);
		    	        	$($('#tableShow1 tr')[2].cells[2]).html(parseInt(wz*100/subtext)+'%');
		    	        	$($('#tableShow1 tr')[3].cells[1]).html(wl);
		    	        	$($('#tableShow1 tr')[3].cells[2]).html(parseInt(wl*100/subtext)+'%');
		    	        	createOption(data.resultData.xxzl,data.resultData.tw,data.resultData.wz,data.resultData.wl);
		    	        }
		    	    });		    	
		      	},
		      	pickTime1 (val){
		      	//消息渠道统计
		      	    $.ajax({
		      	        type: "post",
		      	        url: "/msgStatistic/getMsgChannelById",
		      	        data:{token:sessionStorage.token,date:val},
		      	        async: true,
		      	        success: function(data) {
		      	        	subtext = data.resultData.xxzl;
		      	        	sms = data.resultData.sms;
		      	        	mail = data.resultData.mail;
		      	        	wechat = data.resultData.wechat;
		      	        	$($('#tableShow2 tr')[1].cells[1]).html(sms);//图文
		      	        	$($('#tableShow2 tr')[1].cells[2]).html(parseInt(sms*100/subtext)+'%');
		      	        	$($('#tableShow2 tr')[1].cells[3]).html(sms*0.04);
		      	        	$($('#tableShow2 tr')[2].cells[1]).html(mail);
		      	        	$($('#tableShow2 tr')[2].cells[2]).html(parseInt(mail*100/subtext)+'%');
		      	        	$($('#tableShow2 tr')[2].cells[3]).html('0.00');
		      	        	$($('#tableShow2 tr')[3].cells[1]).html(wechat);
		      	        	$($('#tableShow2 tr')[3].cells[2]).html(parseInt(wechat*100/subtext)+'%');
		      	        	$($('#tableShow2 tr')[3].cells[3]).html('0.00');
		      	        	createOption1(subtext,sms,mail,wechat);
		      	        }
		      	    });
		      	}
		    }
 	 	};   	   
    	var Ctor = Vue.extend(Main);
  		new Ctor().$mount('#calendartool1');
  		new Ctor().$mount('#calendartool2');
   		//new Ctor().$mount('#tableShow1');
   		//new Ctor().$mount('#tableShow2');
</script>
